<template>
  <section class="activity">
    <img class="banner" src="@/assets/images/activity.jpg"/>
    <div class="activity_list" ref="wrapper">
      <ul class="content" >
        <router-link tag="li" v-for="item of activityItem" :key="item.id" :to="/activityDetails/ + item.id">
          <img :src="item.imgUrl"/>
          <span class="status">{{item.status}}</span>
          <p class="name">{{item.name}}</p>
          <div class="mess">
              <i class="iconfont iconrili">{{item.date}}</i>
              <i class="iconfont iconeye">{{item.num}}</i>
          </div>
        </router-link>
      </ul>
    </div>
  </section>

</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'Activity',
  data () {
    return {
      scroll: null,
      activityItem: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        scrollY: true,
        click: true,
        probeType: 3
      })
    })
  },
  created () {
    this.getActivityItem() // 首次加载
  },
  methods: {
    getActivityItem () {
      this.axios.get('/activityItem')
        .then((res) => {
          console.log(res)
          let data = res.data
          this.activityItem = data
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/index.styl"
  .activity
    width 100%
    img
      width 100%
      height auto
    .activity_list
      position fixed
      top 196.5px
      bottom 110px
      overflow hidden
      width 100%
      box-sizing border-box
      background #fff
      ul
        margin-top 40px
        width 100%
        display flex
        flex-direction row
        flex-wrap wrap
        align-content stretch
        padding 18px  30px
        box-sizing border-box
        li
          width 47.8%
          margin-bottom 30px
          overflow hidden
          img
            width 100%
            border-radius 15px
            margin-bottom 6px
          .status
            background-color #f45473
            padding 8px 20px
            border-radius 20px
            font-size 20px
            text-align center
            color #fff
          .name
            font-size 25.5px
            color #747474
            padding-top 5px
            margin-top 20px
            font-weight 600
            ellipsis()
          .mess
            width 100%
          .mess i:nth-child(2)
            margin-left 45px
        li:nth-child(odd)
          margin-right 3.8%

</style>
